<template>
  <div class="padding">
    <div class="flex align-center justify-between">
      <div>
        <div>
          <h5 class="formName Gray Font17 Bold">打印模板</h5>
        </div>
        <div class="padding-top">
          <span class="Font13 Gray_9e"
            >保存系统打印的配置为模板，或上传 Word、Excel
            模板自由定义记录打印的样式。</span
          >
        </div>
      </div>
      <div class="flex align-center justify-end">
        <div class="padding-left">
          <a-button type="primary" icon="plus" shape="round">新建模板</a-button>
        </div>
      </div>
    </div>

    <div class="printTemplatesList overflowHidden flexColumn flex-button">
      <div class="printTemplatesList-header">
        <div class="name flex-button mRight20 valignWrapper">
          <div class="flex-button">名称</div>
          <div class="flexColumn"></div>
        </div>
        <div class="views flex-button mRight20">使用范围</div>
        <div class="action mRight8 w120px">操作</div>
        <div class="more w80px"></div>
      </div>
      <div class="printTemplatesList-box flex-button sortablePrintItemList">
        <div class="printTemplatesList-tr">
          <a-icon type="menu" class="Font14 Hand Gray_9e Hover_21 dragIcon" />
          <div class="name flex-button mRight20 valignWrapper overflowHidden">
            <a-icon
              class="mRight13"
              type="file-word"
              style="color: #2196f3; font-size: 24px"
            />简历模版
          </div>
          <div class="views flex-button mRight20">
            <div class="viewsBox">
              <span class="viewText Gray" style="-webkit-box-orient: vertical"
                >看板,花名册,我的员工档案</span
              >
            </div>
          </div>
          <div class="activeCon mRight8 w120px">
            <span class="Hand Bold">使用范围</span
            ><span class="Hand mLeft20 Bold">编辑</span>
          </div>
          <div class="more w80px TxtCenter">
            <a-icon type="dash" />
          </div>
        </div>
        <div class="printTemplatesList-tr">
          <a-icon type="menu" class="Font14 Hand Gray_9e Hover_21 dragIcon" />

          <div class="name flex-button mRight20 valignWrapper overflowHidden">
            <a-icon
              class="mRight13"
              type="file-word"
              style="color: #2196f3; font-size: 24px"
            />简历模版
          </div>
          <div class="views flex-button mRight20">
            <div class="viewsBox">
              <span class="viewText Gray" style="-webkit-box-orient: vertical"
                >看板,花名册,我的员工档案</span
              >
            </div>
          </div>
          <div class="activeCon mRight8 w120px">
            <span class="Hand Bold">使用范围</span
            ><span class="Hand mLeft20 Bold">编辑</span>
          </div>
          <div class="more w80px TxtCenter">
            <a-icon type="dash" />
          </div>
        </div>
        <div class="printTemplatesList-tr">
          <a-icon type="menu" class="Font14 Hand Gray_9e Hover_21 dragIcon" />
          <div class="name flex-button mRight20 valignWrapper overflowHidden">
            <a-icon
              class="mRight13"
              type="file-word"
              style="color: #2196f3; font-size: 24px"
            />简历模版
          </div>
          <div class="views flex-button mRight20">
            <div class="viewsBox">
              <span class="viewText Gray" style="-webkit-box-orient: vertical"
                >看板,花名册,我的员工档案</span
              >
            </div>
          </div>
          <div class="activeCon mRight8 w120px">
            <span class="Hand Bold">使用范围</span
            ><span class="Hand mLeft20 Bold">编辑</span>
          </div>
          <div class="more w80px TxtCenter">
            <a-icon type="dash" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      height: window.innerHeight - 112,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
    };
  },
  props: {
    config: {
      type: Object,
      default: function () {
        return this.$utils.clone(this.eipZeroCodeView, true).style;
      },
    },
  },
  methods: {},
};
</script>
<style scoped>
.Font17 {
  font-size: 17px !important;
}

.Gray,
.Gray14 {
  color: #333 !important;
}
.Bold {
  font-weight: 700 !important;
}
.Font13 {
  font-size: 13px !important;
}

.Gray_9e {
  color: #9e9e9e !important;
}

.printTemplatesList {
  height: calc(100% - 68px);
  margin-right: -32px;
  margin-top: 3px;
  width: 100%;
}

.printTemplatesList .printTemplatesList-header {
  align-items: center;
  border-bottom: 1px solid #ddd;
  color: #757575;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 11px;
}
.printBox .printTemplatesList .printTemplatesList-box {
  -ms-overflow-style: none;
  overflow-y: scroll;
  scrollbar-width: none;
}
.flex-button {
  flex: 1;
}
.flexColumn {
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.overflowHidden {
  zoom: 1;
  overflow: hidden;
}

.printTemplatesList .printTemplatesList-header .name,
.printTemplatesList .printTemplatesList-tr .name {
  padding-left: 11px;
}

.valignWrapper {
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.mRight20 {
  margin-right: 20px !important;
}

.printTemplatesList .printTemplatesList-box {
  overflow-y: scroll;
  scrollbar-width: none;
}
.printTemplatesList .printTemplatesList-tr {
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  height: auto !important;
  min-height: 68px !important;
}
.printTemplatesList .printTemplatesList-header .name,
.printTemplatesList .printTemplatesList-tr .name {
  padding-left: 11px;
}
.printTemplatesList .printTemplatesList-tr .activeCon > span {
  color: #2196f3;
  display: inline-flex;
}
.Bold {
  font-weight: 700 !important;
}
.Hand,
.pointer {
  cursor: pointer;
}
.printTemplatesList .printTemplatesList-tr .activeCon > span {
  color: #2196f3;
  display: inline-flex;
}

.mLeft20 {
  margin-left: 20px !important;
}
.Bold {
  font-weight: 700 !important;
}
.Hand,
.pointer {
  cursor: pointer;
}
.mRight20 {
  margin-right: 20px !important;
}
.printTemplatesList .printTemplatesList-tr .views {
  padding: 10px 0;
}
.printTemplatesList .printTemplatesList-header .w120px,
.printTemplatesList .printTemplatesList-tr .w120px {
  width: 120px;
}

.mRight8 {
  margin-right: 8px !important;
}
.Font24 {
  font-size: 24px !important;
}

.mRight13 {
  margin-right: 13px !important;
}

.sortablePrintItemList .printTemplatesList-tr:hover .dragIcon {
  opacity: 1;
}
.sortablePrintItemList .printTemplatesList-tr .dragIcon {
  opacity: 0;
}
.Hover_21:hover {
  color: #2196f3 !important;
}
.Hand,
.pointer {
  cursor: pointer;
}
.Gray_9e {
  color: #9e9e9e !important;
}
.Font14 {
  font-size: 14px !important;
}
</style>
